<!-- 新增分区 -->
<template>
  <div>
    <el-dialog title="设备" :visible.sync="dialogShow" width="950px" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-tag class="margin-right-15 margin-bottom-15" v-for="(tag, index) in tags" :key="tag.key" closable @close="handleClose(index)">
        {{ tag.name }}
      </el-tag>
      <div class="flex">
        <div class="level-box level-one bg-color-f8f8f8">
          <div v-for="item in levelOne.list" :key="item.key">
            <div class="tree-item cursor-pointer" :class="levelOne.activeKey == item.key ? 'tree-item-active' : ''" @click="clickItem(item, 1)">{{ item.name }}</div>
          </div>
        </div>
        <div class="level-box level-two">
          <div v-for="item in levelTwo.list" :key="item.key">
            <div class="tree-item cursor-pointer" :class="levelTwo.activeKey == item.key ? 'tree-item-two-active' : ''" @click="clickItem(item, 2)">{{ item.name }}</div>
          </div>
        </div>
        <div class="lelevel-box vel-three">
          <div class="flex align-center" v-for="item in levelThree.list" :key="item.key">
            <div class="tree-item padding-right-100" style="width:250px;">{{ item.name }}</div>
            <el-checkbox :key="item.key" v-model="item.ifPickOn" @change="choseItem(item)"></el-checkbox>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false" class="el-button-reset">取 消</el-button>
        <el-button type="primary" @click="setEquipment">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Bus from '@js/bus.js';

  export default {
    props: {
      contractType: {
        type: String,
        default: '',
      },
      //设备 设施
      optionMap: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },

    data() {
      return {
        dialogShow: false,
        tags: [],
        levelOne: {
          list: [],
          activeKey: '',
        },
        levelTwo: {
          list: [],
          activeKey: '',
        },
        levelThree: {
          list: [],
        },
      };
    },

    watch: {
      optionMap: {
        deep: true,
        handler(val) {
          this.levelOne.list = this.lodash.cloneDeep(this.optionMap.equipmentTree);
        },
      },
    },

    methods: {
      init(tags) {
        this.tags = tags;
        let keyList = [];
        this.tags.forEach(item => keyList.push(item.key));
        this.backFillTree(keyList, this.levelOne.list);
        this.levelOne.activeKey = '';
        this.levelTwo.list = [];
        this.levelTwo.activeKey = '';
        this.levelThree.list = [];
        this.dialogShow = true;
      },

      //点击选项
      clickItem(item, type) {
        if (type == 1) {
          if (this.levelOne.activeKey == item.key) return;
          this.levelOne.activeKey = item.key;
          this.levelTwo.list = item.childList || [];
          this.levelThree.list = [];
        }
        if (type == 2) {
          this.levelTwo.activeKey = item.key;
          this.levelThree.list = item.childList || [];
        }
      },

      //选择设备复选框
      choseItem(row) {
        if (row.ifPickOn) {
          this.tags.push(row);
        } else {
          this.tags.forEach((item, index) => {
            if (item.key == row.key) {
              this.tags.splice(index, 1);
            }
          });
        }
      },

      //移除
      handleClose(index) {
        this.tags.splice(index, 1);
        let keyList = [];
        this.tags.forEach(item => keyList.push(item.key));

        this.backFillTree(keyList, this.levelThree.list);
        this.backFillTree(keyList, this.levelOne.list);
      },

      //回显树数据
      backFillTree(keyList, list) {
        list.forEach(item => {
          if (keyList.indexOf(item.key) > -1) {
            item.ifPickOn = true;
          } else {
            item.ifPickOn = false;
          }
          if (item.childList && item.childList.length > 0) {
            this.backFillTree(keyList, item.childList);
          }
        });
      },

      setEquipment() {
        this.dialogShow = false;
        this.$emit('setEquipment', this.tags);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .level-box {
    width: 33.33%;
  }
  .tree-item {
    height: 40px;
    padding: 10px;
  }
  .tree-item-active {
    background: #ffffff !important;
  }
  .tree-item-two-active {
    background: #409eff !important;
    color: #ffffff;
  }
</style>
